葫芦的运维日志

下一篇 搜索 上一篇

---

通过 <style scoped>  将vue的style只管自己的vue样式

App.vue

<!-- 1模板:html结构 -->
<template>
  <div id="app">
    <h1> {{ title }} </h1>
    <users></users>
  </div>
</template>

<!-- 2行为:逻辑处理 -->
<script>
  // 局部注册组件
  import Users from './components/Users'

  export default {
    name: 'App',
    data() {
      return {
        title: "这是一个干净的脚手架项目!"
      }
    },
    components:{
      "users":Users
    }
  }
</script>

<!-- 3样式:解决样式 -->
<style scoped>
h1{
  color:purple;
}
</style>

components/Users.vue

<template>

  <div class="users">
    <h1>hello users</h1>
  <ul>
    <li v-for="user in users">{{user}}</li>
  </ul>
  </div>
</template>

<script>
  export default {
    name: "users",
    data() {
      return {users: ["brownwang", "wangzi", "hulu"]}
    }
  }
</script>

<style scoped>
h1{
  color:green;
}
</style>

 

葫芦的运维日志

打赏

上一篇 搜索 下一篇